<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">场所设备</small>
      </a>
      <a href="javascript:;" class="save">
        <button @click="submitForm()" type="primary">保存</button>
      </a>
    </header>
    <main>
      <div class="formcontent">
        <ul>
          <li>
            <span>经营场所面积</span>
            <div class="froms">
              <input v-model="listData.operatingArea">
            </div>
          </li>
          <li>
            <span><em>*</em>厨房面积</span>
            <div class="froms">
              <input v-model="listData.kitchenArea" name="kitchenArea" v-validate="'required|numeric'" :class="{'is-danger': errors.has('kitchenArea')}">
            </div>
          </li>
          <li>
            <span><em>*</em>就餐场所面积</span>
            <div class="froms">
              <input v-model="listData.diningArea" name="diningArea" v-validate="'required'" :class="{'is-danger': errors.has('diningArea')}">
            </div>
          </li>
          <li>
            <span><em>*</em>仓库库存面积</span>
            <div class="froms">
              <input v-model="listData.warehouseArea" name="warehouseArea" v-validate="'required'" :class="{'is-danger': errors.has('warehouseArea')}">
            </div>
          </li>
          <li>
            <span><em></em>冻品仓库数量</span>
            <div class="froms">
              <input v-model="listData.frozenGoodsNum">
            </div>
          </li>
          <li>
            <span><em>*</em>其他仓库数量</span>
            <div class="froms">
              <input v-model="listData.otherGoodsWNum" name="otherGoodsWNum" v-validate="'required'" :class="{'is-danger': errors.has('otherGoodsWNum')}">
            </div>
          </li>
        </ul>
        <div class="filemain">
          <app-upload :uploadmsg="imgData.uploadmsg" :getuniddata="imgData.getuniddata" :UserUnid="imgData.UserUnid" :AliasData="imgData.AliasData" :AliasDataSort="imgData.AliasDataSort"></app-upload>
        </div>
        <div class="equipmentbox">
          <i class="el-icon-document"></i>消毒设备信息
          <div class="img-btnbox">
            <div class="showclick">
              <input type="button" accept="image" @click="appendequipment">
            </div>
          </div>
          <ul v-for="(equipment, index) in disinfect" :index="this.index" class="files">
            <li><span>顺序</span><input v-model="equipment.serialNumber"></li>
            <li><span>品名</span><input v-model="equipment.deviedName"></li>
            <li><span>数量</span><input v-model="equipment.aMount"></li>
            <p class="f_r">
              <el-button type="primary" icon="delete2" class="c_f" size="mini" @click="deleteSkill(index)" :disabled="forbidden">删除</el-button>
            </p>
          </ul>
        </div>
  
      </div>
    </main>
  </div>
</template>

<script>
  import AppUpload from '@/components/upload'
  /*附件*/
  import {
    GetGuid,
    UploadSingleFile,
    FileData,
    DeleteFile
  } from '../../../api/api';
  import {
    PlaceLayoutAdd
  } from '../../../api/api';
  import {
    Loadmore,
    Popup
  } from 'mint-ui';
  var moment = require('moment');
  import Exif from 'exif-js';
  export default {
    components: {
      'mt-popup': Popup,
      'v-loadmore': Loadmore,
      'app-upload': AppUpload,
    },
    data() {
      return {
        //表单
        listData: {
          operatingArea: '',
          kitchenArea: '',
          diningArea: '',
          warehouseArea: '',
          frozenGoodsNum: '',
          otherGoodsWNum: '',
        },
        count: 0,
        disinfect: [{
          serialNumber: '',
          deviedName: '',
          aMount: ''
        }],
        //上传图片
        headerImage: '',
        picValue: '',
        //unidoption:'',
        FileDatalist: [],
        imgData: {
          uploadmsg: '场所布局图信息',
          getuniddata: '',
          UserUnid: '',
          AliasData: '',
          AliasDataSort: ''
        },
  
      };
    },
    methods: {
      //获取32unid
      getunid: function() {
        this.imgData.UserUnid = JSON.parse(localStorage.getItem('auth')).UserUnid;
        GetGuid().then((res) => {
          if (res.success === true) {
            this.imgData.getuniddata = res.data;
          }
        })
      },
      //添加
      appendequipment: function(index) {
        this.disinfect.push({
          serialNumber: '',
          deviedName: '',
          aMount: '',
        })
        this.count += 1
      },
      //删除
      deleteSkill(index) {
        if (index == 0 && this.count == 0) {
          this.$message.error('至少添加一个设备');
        } else {
          this.disinfect.splice(index, 1);
          this.count -= 1
        }
      },
      //提交表单
      submitForm: function() {
        this.$validator.validateAll().then((result) => {
          if (result) {
            let varEnterprise = {
              Unid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid
            }
            let data = {
              Unid: this.imgData.getuniddata,
              Enterprise: varEnterprise,
              OperatingArea: this.listData.operatingArea,
              KitchenArea: this.listData.kitchenArea,
              DiningArea: this.listData.diningArea,
              WarehouseArea: this.listData.warehouseArea,
              FrozenGoodsNum: this.listData.frozenGoodsNum,
              OtherGoodsWNum: this.listData.otherGoodsWNum
            }
            let dataoption = {
              params: {
                Data: JSON.stringify(data),
                PlaceLayoutDeviedData: JSON.stringify(this.disinfect),
                UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
              }
            }
            //调取接口
            PlaceLayoutAdd(dataoption).then((res) => {
              if (res.success === true) {
                this.$message.success('保存成功');
                this.$router.go(-1);
              } else {
                this.$message.error(res.msg);
              }
            }).catch(function() {
              this.$message.error('网络异常。');
            })
          } else {
            this.$message.error('带*号为必填项，请确认填写格式正确');
          }
        })
  
      },
    },
    mounted() {
      this.getunid(); //获取unid
    }
  }
</script>

<style lang="scss">
  .uploadbox,
  .equipmentbox {
    position: relative;
    margin: 20px 0px;
    i {
      padding-left: 10px;
    }
  }
  
  .img-btnbox {
    position: absolute;
    right: 10px;
    top: -5px;
    width: 25px;
    height: 25px;
    overflow: hidden;
  }
  
  .showclick {
    position: relative;
    cursor: pointer;
    color: #888;
    background: url("../../../img/add.png") no-repeat;
    background-size: contain;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    input {
      opacity: 0;
      filter: alpha(opacity=0);
      cursor: pointer;
      width: 35px;
      height: 100%;
    }
  }
  
  .el-radio__label {
    margin-top: 2px;
  }
  
  .disabled {
    display: none
  }
  
  //重构
  .items-text {
    p {
      margin: 0em !important;
      padding: 0em !important;
      line-height: 20px;
    }
  }
  
  em {
    width: 5px;
    display: -webkit-inline-box;
  }
  
  .files {
    overflow: hidden;
    li {
      display: flex;
      span {
        font-size: 0.95rem;
        color: #333;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        line-height: 35px
      }
      input {
        height: 35px;
        border: none;
        background: #efefef;
        margin-bottom: 5px;
        -webkit-box-flex: 5;
        -ms-flex: 5;
        flex: 5;
      }
    }
    padding: 10px;
  }
</style>
